(ns hiccup_plus.boostrap
  (:require [hiccup_plus.core]
            ))

(def bootstrap-containers
  [
   {
    :name  "accordion-button"
    :style [:button {:class "accordion-button" :type "button" :data-bs-toggle "collapse" :aria-expanded "true"}]

    }
   {
    :name  "accordion-header"
    :style [:h2 {:class "accordion-header"}]
    }
   {
    :name  "accordion-item"
    :style [:div {:class "accordion-item"}]
    }
   {
    :name  "accordion-collapse"
    :style [:div {:class "accordion-collapse collapse" :data-bs-parent "#accordionExample"}
            [:div {:class "accordion-body"}]]
    }
   {
    :name  "alert-primary"
    :style [:div {:class "alert alert-primary" :role "alert"}]
    }
   {
    :name  "alert-secondary"
    :style [:div {:class "alert alert-secondary" :role "alert"}]
    }
   {
    :name  "alert-success"
    :style [:div {:class "alert alert-success" :role "alert"}]
    }
   {
    :name  "alert-danger"
    :style [:div {:class "alert alert-danger" :role "alert"}]
    }
   {
    :name  "alert-warning"
    :style [:div {:class "alert alert-warning" :role "alert"}]
    }
   {
    :name  "alert-info"
    :style [:div {:class "alert alert-info" :role "alert"}]
    }
   {
    :name  "alert-light"
    :style [:div {:class "alert alert-light" :role "alert"}]
    }
   {
    :name  "alert-dark"
    :style [:div {:class "alert alert-dark" :role "alert"}]
    }
   {
    :name  "badge-primary"
    :style [:span {:class "badge text-bg-primary"}]
    }
   {
    :name  "badge-secondary"
    :style [:span {:class "badge text-bg-secondary"}]
    }
   {
    :name  "badge-success"
    :style [:span {:class "badge text-bg-success"}]
    }
   {
    :name  "badge-danger"
    :style [:span {:class "badge text-bg-danger"}]
    }
   {
    :name  "badge-warning"
    :style [:span {:class "badge text-bg-warning"}]
    }
   {
    :name  "badge-info"
    :style [:span {:class "badge text-bg-info"}]
    }
   {
    :name  "badge-light"
    :style [:span {:class "badge text-bg-light"}]
    }
   {
    :name  "badge-dark"
    :style [:span {:class "badge text-bg-dark"}]
    }
   {
    :name  "button-primary"
    :style [:button {:type "button" :class "btn btn-primary"}]
    }

   {
    :name  "button-secondary"
    :style [:button {:type "button" :class "btn btn-secondary"}]
    }
   {
    :name  "button-success"
    :style [:button {:type "button" :class "btn btn-success"}]
    }
   {
    :name  "button-danger"
    :style [:button {:type "button" :class "btn btn-danger"}]
    }
   {
    :name  "button-warning"
    :style [:button {:type "button" :class "btn btn-warning"}]
    }
   {
    :name  "button-info"
    :style [:button {:type "button" :class "btn btn-info"}]
    }
   {
    :name  "button-light"
    :style [:button {:type "button" :class "btn btn-light"}]
    }
   {
    :name  "button-dark"
    :style [:button {:type "button" :class "btn btn-dark"}]
    }

   {
    :name  "btn-group"
    :style [:div {:class "btn-group" :role "group" :aria-label "Basic mixed styles example"}]}
   {
    :name  "breadcrumb"
    :style [:nav {:aria-label "breadcrumb"} [:ol {:class "breadcrumb"} [:li {:class "breadcrumb-item active" :aria-current "page"}]]]
    }
   {
    :name  "ul"
    :style [:ul {:class "list-group list-group-flush"}]
    }
   {
    :name  "li"
    :style [:li {:class "list-group-item"}]
    }
   {
    :name  "card"
    :style [:div {:class "card" :style "width:18rem;"}]
    }
   {
    :name  "card-img"
    :style [:img {:class "card-img-top"}]
    }
   {
    :name  "close-button"
    :style [:button {:type "button" :class "btn-close" :aria-label "cloase"}]
    }
   {
    :name  "list-group"
    :style [:ul {:class "list-group"}]
    }
   {
    :name  "list-group-item"
    :style [:li {:class "list-group-item"}]
    }
   {
    :name  "carousel-inner"
    :style [:div {:class "carousel-inner"}]
    }
   {
    :name  "carousel-item"
    :style [:div {:class "carousel-item"}]
    }
   {
    :name  "carousel-body"
    :style [:div {:class "carousel-body"}]
    }
   {
    :name  "carousel-title"
    :style [:div {:class "carousel-title"}]
    }
   {
    :name  "carousel-text"
    :style [:div {:class "carousel-text"}]
    }
   {
    :name  "carousel-header"
    :style [:div {:class "carousel-header"}]
    }

   {
    :name  "dropdown"
    :style [:div {:class "dropdown"}]
    }
   {
    :name  "dropdown-button"
    :style [:button {:class "btn btn-secondary dropdown-toggle" :type "button" :data-bs-toggle "dropdown" :aria-expanded "false"}]
    }
   {
    :name  "dropdown-menu"
    :style [:ul {:class "dropdown-menu"}]
    }
   {
    :name  "dropdown-item"
    :style [:a {:class "dropdown-item" :href "#"}]
    }
   {
    :name  "dropdown-divider"
    :style [:hr {:class "dropdown-divider"}]
    }
   {
    :name  "modal"
    :style [:div {:class "modal" :tabindex "-1"}]
    }
   {
    :name  "modal-dialog"
    :style [:div {:class "modal-dialog"}]
    }
   {
    :name  "modal-title"
    :style [:h5 {:class "modal-title"}]
    }
   {
    :name  "modal-dialog-center"
    :style [:div {:class "modal-dialog modal-dialog-centered"}]
    }
   {
    :name  "modal-content"
    :style [:div {:class "modal-content"}]
    }
   {
    :name  "modal-header"
    :style [:div {:class "modal-header"}]
    }
   {
    :name  "modal-body"
    :style [:div {:class "modal-body"}]
    }
   {
    :name  "modal-footer"
    :style [:div {:class "modal-footer"}]
    }
   {
    :name  "modal-close-button"
    :style [:button {:type "button" :class "btn-close" :data-bs-dismiss "modal" :aria-label "close"}]
    }
   {
    :name  "modal-popover-button"
    :style [:button {:class "btn btn-secondary" :data-bs-toggle "popover"}]
    }
   {
    :name  "offcanvas"
    :style [:div {:class "offcanvas offcanvas-start show" :tabindex "-1" :aria-labelledby "offcanvasLabel"}]
    }
   {
    :name  "offcanvas-header"
    :style [:div {:class "offcanvas-header"}]
    }
   {
    :name  "offcanvas-title"
    :style [:h5 {:class "offcanvas-title"}]
    }
   {
    :name  "offcanvas-body"
    :style [:div {:class "offcanvas-body"}]
    }
   {
    :name  "pagination"
    :style [:div {:class "pagination"}]
    }
   {
    :name  "pagination-item"
    :style [:div {:class "page-item"}]
    }
   {
    :name  "pagination-link"
    :style [:a {:class "page-link"}]
    }
   {
    :name  "pagination-link-prev"
    :style [:a {:class "page-link" :aria-label "Previous"} [:span {:aria-hidden "true"} "&laquo;"]]
    }
   {
    :name  "pagination-link-next"
    :style [:a {:class "page-link" :aria-label "Next"} [:span {:aria-hidden "true"} "&raquo;"]]
    }
   {
    :name  "container"
    :style [:div {:class "container"}]
    }
   {
    :name  "row"
    :style [:div {:class "row"}]
    }
   {
    :name  "col"
    :style [:div {:class "col"}]
    }
   {
    :name  "form-range"
    :style [:input {:type "range" :class "form-range"}]
    }
   {
    :name  "progress"
    :style [:div.progress {:role "progressbar" :aria-label "Basic example" :aria-valuenow "0" :aria-valuemin "0" :aria-valuemax "100"}
            [:div.progress-bar {:style "width: 0%"}]]
    }

   {
    :name  "spinner-primary"
    :style [:div {:class "spinner-border text-primary" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-secondary"
    :style [:div {:class "spinner-border text-secondary" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-success"
    :style [:div {:class "spinner-border text-success" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-danger"
    :style [:div {:class "spinner-border text-danger" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-warning"
    :style [:div {:class "spinner-border text-warning" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-info"
    :style [:div {:class "spinner-border text-info" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-light"
    :style [:div {:class "spinner-border text-light" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "spinner-dark"
    :style [:div {:class "spinner-border text-dark" :role "status"}
            [:span {:class "visually-hidden"} "Loading..."]]
    }
   {
    :name  "head"
    :style [:head
            [:meta {:charset "utf-8"}]
            [:meta {:name "viewport" :content "width=device-width,initial-scale=1"}]
            [:link {:rel "stylesheet" :href "/css/bootstrap.min.css"}]]
    }
   {
    :name  "html"
    :style [:html]
    }
   {
    :name  "body"
    :style [:body]
    }
   {
    :name  "script"
    :style [:script]
    }
   {
    :name  "input-text"
    :style [:input {:type "text" :class "form-control"}]
    }
   ])


;(defn render-page []
;  (h/html
;    (html
;      (head [:title "Custom Button Example"])
;      (body
;        (container
;          (row
;            (col
;              (button-secondary "确定")
;              (alert-success "抬头看!群星璀璨")
;              )))
;        )
;      (script {:src "/js/jquery-3.6.4.min.js"})
;      )
;    ))
;
;(println (str (render-page)))

;(defprotocol HiccupRenderer
;  (render-hiccup [this]
;    "Turn a hiccup data type with customer type"))
;
;(defn render-hiccup-vec [this])
;(extend-protocol HiccupRenderer
;  IPersistentVector
;  (render-hiccup [this]
;    (render-hiccup-vec this))
;  RawString
;  (render-hiccup [this]
;    (str this))
;  )



(defn transformer-tag [element]
  "不含自定义element标签的时候，和标签对应的组件进行合并"
  (let [
        tag-name (name (first element))
        tag-match (filter #(= (:name %) tag-name)
                          bootstrap-containers)
        ]
    (if (empty? tag-match)
      element
      (hiccup_plus.core/merge-element (:style (first tag-match)) (vec (rest element))))
    )
  )
(defn bootstrap-tag-transformer [elements]
  "自底而上把自定义标签进行替换，并且和组件样式进行合并"
  (if (empty? (filter #(vector? %) elements))
    (transformer-tag elements)
    (let [
          tags (map #(if (vector? %)
                       (vec (bootstrap-tag-transformer %))
                       %)
                    elements)
          ]
      (transformer-tag tags)
      )
    ))
